let that
class Member {
  constructor(id) {
    that = this
    this.main = document.querySelector(id)
    this.ul = this.main.querySelector('.vip-inf ul')
    this.addbutton = this.main.querySelector('.add-member')
    this.searchbutton = this.main.querySelector('.search-member')
    this.searchname = this.main.querySelector('.vip-inf .coper-member .search-name')
    this.name = this.main.querySelector('.vip-inf .coper-member .name')
    this.money = this.main.querySelector('.vip-inf .coper-member .recharge')


    this.Init()
  }
  Init() {
    this.Update()
    for (let i = 1; i < this.lis.length; i++) {
      this.lis[i].index = i
      this.recharges[i].index = i
      this.removes[i].onclick = this.Remove
      this.recharges[i].onclick = this.Edit
    }
    this.searchbutton.onclick = this.Search
    this.addbutton.onclick = this.Add
  }
  Update() {
    this.lis = this.main.querySelectorAll('li')
    this.removes = this.main.querySelectorAll('li .delete')
    this.recharges = this.main.querySelectorAll('li .extera .recharge')
    this.names = this.main.querySelectorAll('.vip-inf ul li .name')
    this.Exteras = this.main.querySelectorAll('.vip-inf ul li .extera span:first-child')
  }
  Search() {
    const str = that.searchname.value
    if (!str) {
      alert('请输入要查找的姓名')
    }
    else {
      let i
      for (i = 1; i < that.lis.length; i++) {
        if (that.names[i].innerHTML === str) {
          console.log('Yes')
          break
        }
      }
      if (i === that.lis.length) {
        alert('未找到该成员')
      }
      for (i = 1; i < that.names.length; i++) {
        if (str === that.names[i].innerHTML) {
          that.lis[i].classList.add('active2')
          const top = that.names[i].offsetTop
          document.documentElement.scrollTop = top
          const id = setInterval(() => {
            document.querySelector('.active2').className = ''
            clearInterval(id)
          }, 1000);
          break
        }
      }
    }
    that.searchname.value = ''
  }
  Add() {
    let num = parseInt(that.lis.length)
    num = num < 10 ? '0' + num : num
    num = num < 100 ? '0' + num : num
    const Name = that.name.value
    const Money = that.money.value
    let str
    for (let i = 0; i < that.names.length; i++) {
      if (Name === that.names[i].innerHTML) {
        str = true
      }
    }
    if (!Name && !Money) {
      alert('请先输入姓名/金额')
    }
    else if (Name === '') {
      alert('请输入姓名')
    }
    else if (Money === '') {
      alert('请输入金额')
    }
    else if (str) {
      alert('该会员已存在！')
    }
    else {
      alert('添加成功')
      let li = `<li><span class="card">${num}</span><span class="name">${Name}</span><span class="extera"> <span>${Money}</span><span class="recharge" >充值</span ></span > <span class="delete">删除</span></li > `
      that.ul.insertAdjacentHTML('beforeend', li)
      that.Init()
    }
    that.name.value = ""
    that.money.value = ""
    that.Init()
  }
  Remove() {
    let index = this.parentNode.index
    console.log(index);
    that.lis[index].remove()
    that.Init()
  }
  Edit() {
    const index = this.index
    let label = document.querySelector(`.vip-inf ul li:nth-child(${index + 1}) .extera span:first-child`)
    const str = label.innerHTML
    label.innerHTML = `<input type="text" value="${str}"  style="height: 20px;width: 40px;">`
    const input = document.querySelector(`.vip-inf ul li:nth-child(${index + 1}) .extera span:first-child`).children[0]
    input.select()

    input.onblur = function () {
      label.innerHTML = input.value
    }
    input.onkeyup = function (e) {
      if (e.keyCode == 13)
        this.blur()
    }
  }

  Getlist = () => {
    return that.names
  }
  GetMoney = () => {
    return that.Exteras
  }
  ComputerInit() {
    Computer.Init()
  }
}

let _that
class Computer {
  constructor(id) {
    _that = this
    this.main = document.querySelector(id)
    this.ul = this.main.querySelector('.computer-inf ul')
    this.Init()
  }


  Init() {
    this.Update()
    for (let i = 1; i < this.lis.length; i++) {
      this.copers[i].index = i
      this.copers[i].onclick = this.CloseInterval
    }
    document.querySelector('.add-com').onclick = this.AddComputer
    document.querySelector('.use-com').onclick = this.AddMember
  }
  Update() {
    _that.lis = document.querySelectorAll('.computer-inf li')
    _that.names = document.querySelectorAll('.computer-inf li .User')
    _that.vips = document.querySelectorAll('.computer-inf li .Vip')
    _that.conditions = document.querySelectorAll('.computer-inf li .condition')
    _that.times = document.querySelectorAll('.computer-inf .time')
    _that.copers = document.querySelectorAll('.computer-inf li .coper')
    _that.MemberList = member.Getlist()
    _that.ExteraList = member.GetMoney()
    for (let i = 0; i < _that.ExteraList.length; i++) {
      console.log(_that.ExteraList[i].innerHTML)
    }
  }
  AddMember() {
    const name = document.querySelector('.computer-inf .naming')
    let num = document.querySelector('.computer-inf .numing')
    if (+num.value >= _that.lis.length) {
      alert('请输入正确的编号')
    }
    else if (!name.value && !num.value) {
      alert('请先输入编号/姓名')
    }
    else if (!num.value) {
      alert('请先输入编号')
    }
    else if (!name.value) {
      alert('请先输入姓名')
    }
    else if (_that.names[+num.value].innerHTML !== "-----") {
      alert('该电脑已经被占用')
    }
    else {
      _that.names[+num.value].innerHTML = name.value
      let i
      for (i = 0; i < _that.MemberList.length; i++) {
        if (_that.MemberList[i].innerHTML == name.value) {
          _that.vips[+num.value].innerHTML = '会员'
          break
        }
      }
      if (i === _that.MemberList.length) {
        _that.vips[+num.value].innerHTML = '普通'
      }
      _that.conditions[+num.value].innerHTML = '占用'
      _that.OpenInterval(+num.value)
    }
    _that.Init()
    name.value = ''
    num.value = ''
  }
  OpenInterval(num) {
    _that.times[num].time = 0
    _that.times[num].index = setInterval(function () {
      _that.times[num].time += 1
      let m = parseInt(_that.times[num].time / 60 % 60)
      let h = parseInt(_that.times[num].time / 60 / 60 % 24)
      m = m < 10 ? '0' + m : m
      h = h < 10 ? '0' + h : h
      _that.times[num].innerHTML = `${h}:${m}`

    }, 10)

  }
  CloseInterval() {
    console.log(_that.names[this.index].innerHTML)
    if (_that.names[this.index].innerHTML !== "-----") {
      const time = _that.times[this.index].time
      const money = parseInt(time / 60 * 0.1)
      console.log(money)
      let i
      for (i = 1; i < _that.MemberList.length; i++) {
        if (_that.names[this.index].innerHTML === _that.MemberList[i].innerHTML) {
          alert(`会员${_that.names[this.index].innerHTML}此次消费${money}元,余额为${_that.ExteraList[this.index].innerHTML - money}`)
          _that.ExteraList[`${i}`].innerHTML = (_that.ExteraList[this.index].innerHTML - money)
          break
        }
      }
      if (i === _that.MemberList.length) {
        alert(`普通顾客：${_that.names[this.index].innerHTML}  此次消费：${money}元`)
      }
      clearInterval(_that.times[this.index].index)
      _that.names[this.index].innerHTML = "-----"
      _that.vips[this.index].innerHTML = "-----"
      _that.conditions[this.index].innerHTML = "闲置"
      _that.times[this.index].innerHTML = "-----"
    }
  }
  AddComputer() {
    let num = _that.lis.length
    num = num < 10 ? '0' + num : num
    num = num < 100 ? '0' + num : num
    const type = document.querySelector('.add-computer').value
    if (!type) {
      alert('请输入电脑型号')
    }
    else {
      const li = `<li>
        <span class="num">${num}</span><span class="type">${type}</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>`
      _that.ul.insertAdjacentHTML('beforeend', li)
    }

    document.querySelector('.add-computer').value = ''
    _that.Init()
  }

}
let tat
class Side {
  constructor(id) {
    tat = this
    this.main = document.querySelector(id)
    this.Init()
  }
  Init() {
    this.Update()
    for (let i = 0; i < this.labels.length; i++) {
      this.labels[i].index = i
      this.labels[i].onclick = this.Toggle
    }

  }
  Update() {
    this.labels = this.main.querySelectorAll('.Sidebar .nav-list .nav-link')
  }
  Toggle() {
    computer.Init()
    const old = document.querySelector('.active')
    old.classList.remove('active')
    this.classList.add('active')
    tat.AddClass()
    if (this.index === 0) {
      document.querySelector('.home').classList.remove('Active')
    }
    else if (this.index === 1) {
      document.querySelector('.vip-inf').classList.remove('Active')
    }
    else if (this.index === 2) {
      document.querySelector('.computer-inf').classList.remove('Active')
    }

  }
  AddClass() {
    this.home = document.querySelector('.home')
    this.vip = document.querySelector('.vip-inf')
    this.computer = document.querySelector('.computer-inf')
    this.home.classList.add('Active')
    this.vip.classList.add('Active')
    this.computer.classList.add('Active')
  }
}
const member = new Member('#vip')
const side = new Side('#side')
const computer = new Computer("#computer")




